<template>
  <div style="padding: 20px">
    <div class="headerBoxList">
    <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9.25564L24.0086 4L42 9.25564V20.0337C42 31.3622 34.7502 41.4194 24.0026 45.0005C13.2521 41.4195 6 31.36 6 20.0287V9.25564Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M15 23L22 30L34 18" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span style="margin-left: 10px"
        >白名单
      </span>
      <el-button
      type="primary"
      size="mini"
      style="margin-left:auto"
      @click="handlePrint"
    >
      打印
    </el-button>

    </div>
    <div class="content">
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="content"
        label="内容"
        >
        <template slot-scope="scope">
            <div>名称：{{scope.row.name}}</div>
            <div>拦截电话：{{scope.row.phone}}</div>
        </template>
      </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
      :small='true'
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="offset"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
    </div>
  </div>
</template>
  
  <script>
  import { getHuaWeiInfoApi } from "@/api/phoneInfo/index"
export default {
  props:['sendData'],
  name: "writeList",
  data() {
    return {
      list: [],
      offset:1,
      limit:1000,
      total: 0,
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    "$store.state.account.huawei": function () {
      this.tableData = [];
    this.init()
    },
  },
  methods: {
    handlePrint() {
  if (!this.list.length) {
    this.$message.warning("暂无数据可打印")
    return
  }

  const properties = [
    { field: "name", displayName: "名称" },
    { field: "phone", displayName: "拦截电话" },
  ]

  printJS({
    printable: this.list,
    properties,
    type: "json",
    header: "白名单",
    style: `
      table {
        border-collapse: collapse;
        width: 100%;
        font-size: 14px;
      }
      table td, table th {
        border: 1px solid #ccc;
        padding: 8px;
        word-break: break-all;
      }
      table th {
        background: #f6f6f6;
        font-weight: 600;
      }
      table tr:nth-child(even){
        background:#fafafa;
      }
    `,
  })
},
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.limit = val;
        this.init()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.offset = val;
        this.init()
      },
    init() {
        let data = {
            proof_num : this.sendData.proof_num,
            harassmentType:'whitelist',
            offset:this.offset,
            limit:this.limit
        }
        getHuaWeiInfoApi(data).then(res=>{
            this.list = res.data;
            if(res.data.length ==0)this.total = 0
            this.total = res.data[0].cnt
        }).catch(error=>{

        })
    },
  },
};
</script>
  
  <style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.content {
  height: 80vh;
  overflow-y: auto;
  /* padding-left: 50px; */
  margin-top: 20px;
}
@media screen and (min-width: 2360px) {
  .content {
    height: 67vh;
    overflow-y: auto;
  }
}
</style>